<script setup>
import GameBaseInfo from "@/views/FrontViews/StoreModule/Detail/components/GameBaseInfo.vue";
import GamePrice from "@/views/FrontViews/StoreModule/Detail/components/GamePrice.vue";
import GameDescription from "@/views/FrontViews/StoreModule/Detail/components/GameDescription.vue";
import GameRequire from "@/views/FrontViews/StoreModule/Detail/components/GameRequire.vue";
import {useRoute} from "vue-router";
import {gameGetAPI} from "@/api/FrontApi/game.js";
import {ref, watch} from 'vue'

const route = useRoute()

const gameDetailInfo = ref({
  game: {},
  gameView: {},
  gameDetail: {},
  gamePublisher: {},
  gamePrice: {},
  gameCategory: [],
  gameRequire: []
})

const getGameDetail = async (id = route.params.id) => {
  const res = await gameGetAPI(id)
  gameDetailInfo.value = res.data
}

watch(
    () => route.params.id,
    (newValue) => {
      getGameDetail(newValue)
    }, {
      immediate: true
    })
</script>

<template>
  <div class="game-detail-info">
    <div class="container">
      <h1 class="title">{{ gameDetailInfo.game.chineseName }}&nbsp; ({{ gameDetailInfo.game.englishName }})</h1>
    </div>
    <GameBaseInfo
        :gameView="gameDetailInfo.gameView"
        :game="gameDetailInfo.game"
        :gameDetail="gameDetailInfo.gameDetail"
        :publisher="gameDetailInfo.gamePublisher"/>
    <GamePrice :game="gameDetailInfo.game" :gamePrice="gameDetailInfo.gamePrice"/>
    <GameDescription :gameDetail="gameDetailInfo.gameDetail" :category="gameDetailInfo.gameCategory"/>
    <GameRequire :gameRequire="gameDetailInfo.gameRequire"/>
  </div>
</template>

<style scoped>
.game-detail-info {
  .container{
    .title {
      margin-left: 20px;
      font-size: 30px;
      color: #fff;
      font-weight: 400;
    }
  }
}
</style>
